<style scoped>
.main-body{position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: url(../assets/login-ground.jpg) no-repeat, #ffe400;background: url(../assets/login-ground.jpg) no-repeat, -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd100), to(#ffe400));-webkit-background-size: cover;background-size: cover;}
.login-box{width: 400px;margin: 0 auto;}
.login-logo{color: #fff;font-size: 18px;text-align: center;padding: 20px 0 30px;}
.login-detail{padding: 20px;background-color: #fff;border-radius: 4px;}
.fullwidth{width: 100%;}
.auto_login_desc{color: #666;}
.attch_fn a{color: #999;}
.attch_fn a:hover{text-decoration: underline;}
.auto_login_desc .el-checkbox__input.is-checked+.el-checkbox__label{color: #666;}
</style>

<template>
<div class="main-body">
    <div class="login-box">
        <div class="login-logo">
            <div class="login-logo-name">注册页面</div>
            <div class="login-logo-meta">aaaaaaaa</div>
        </div>
        <div class="login-detail">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">

                <el-form-item label="" prop="username">
                    <el-input class="" autofocus placeholder="请输入用户名,4-10位" prefix-icon="el-icon-wsj-yonghu" v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input class="" placeholder="请输入密码,6-8位" prefix-icon="el-icon-wsj-locksuo" v-model="ruleForm.password" />
                </el-form-item>
                <el-form-item label="" prop="password2">
                    <el-input class="" placeholder="再次输入密码,6-8位" prefix-icon="el-icon-wsj-locksuo" v-model="ruleForm.password2" />
                </el-form-item>

                <el-button class=" fullwidth" :loading="bloading" type="success" @click="isFormValid('ruleForm')">注册</el-button>
            </el-form>
            <br>
            <div class="yt yt-pj">
                <div></div>
                <div class="attch_fn">
                    <router-link :to="{path:'admin'}">已有账号，登录</router-link>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        var username1=(rule,value,callback)=>{
         
            //用户名的正则
          callback()
        }
        var password = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('不能为空'))
            }
            if (value.length < 6 || value.length > 18) {
                return callback(new Error('需6至18个字符'))
            }
            callback()
        };
        var password2 = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('不能为空'))
            }
            if (this.ruleForm.password != value) {
                return callback(new Error('两次密码不一致'))
            }
            callback()
        };
        return {
            ruleForm: {
                username: '',
                password: '',
                password2: ''
            },
            bloading: false,
            rules: {
                username: [{
                        required: true,
                        message: '不可为空',
                        trigger: 'blur'
                    },
                    {
                        min: 4,
                        max: 10,
                        message: '需4至10个字符',
                        trigger: 'blur'
                    },
                    {
                        validator: username1,
                        trigger: 'blur'
                    }
                ],
                password: [{
                    validator: password,
                    trigger: 'blur'
                }],
                password2: [{
                    validator: password2,
                    trigger: 'blur'
                }]
            }
        }
    },
    components: {

    },
    mounted() {
        
    },
    methods: {
      isFormValid(ruleForm){
        this.$refs[ruleForm].validate((valid)=>{
           console.log('======valid',valid);
           if(valid){
             this.register()
           }
         })
      },
        register() {
            var that = this
            var username = that.ruleForm.username
            var password = that.ruleForm.password
            var password2 = that.ruleForm.password2
            that.bloading = true
       
            this.$axios.post(this.$api.createUser,{
                username,
                password                
            })
            .then((res)=>{
                if(res.errCode===1){
                    var docCookies=this.$docCookies
                    var config=this.$config
                    docCookies.setItem(config.COOKIEJWTNAME,res.data.jwt,docCookies.addTime({day:config.COOKIETIME}))
                    this.$message({
                        message: '注册成功',
                        type: 'success',
                        duration: 1000,
                        onClose: function () {
                            that.bloading = false
                            that.$router.push({path:'/adm'})
                        }
                    });
                }else{
                    this.$message({
                        message:res.msg,
                        type: 'error',
                        duration: 2000,
                        onClose: function () {
                            that.bloading = false
                        }
                    });  
                }
            })
           
        }
    }
}
</script>
